<template>
  <el-dialog v-model="configDialogVisible">
    <PathsConfig :config-item-name="'docs_indexing_paths'"/>
  </el-dialog>
  <el-button :icon="Setting" @click="configDialogVisible = true"></el-button>
  <el-progress :text-inside="true" :stroke-width="24" :percentage="progress" status="success"></el-progress>
  <el-button type="primary" @click="startIndexing">Start indexing!</el-button>
  <el-input v-model="textToSearch"></el-input>
  <el-button type="primary" @click="search">Search!</el-button>
  <el-table :data="searchResults" :tree-props="{ children: 'paragraphs', hasChildren: 'hasChildren' }">
    <el-table-column prop="id" label="Index" width="60" />
    <el-table-column prop="file" label="File" width="380" />
    <el-table-column prop="text" label="Text" width="480" />
    <el-table-column label="操作" width="60">
      <template #default="scope">
        <!-- <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
          Edit
        </el-button> -->
        <el-button size="small" type="danger" @click="openFile(scope)">
          Delete
        </el-button>
      </template>
    </el-table-column>

    <!-- <el-table-column prop="address" label="Address" /> -->
  </el-table>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineProps } from 'vue'
import { createWebSocket, fetchData, openSearchResult } from '@/requests'
import { ElButton, ElProgress } from 'element-plus';
import { Setting } from '@element-plus/icons-vue';
import { ElDialog } from 'element-plus';
import PathsConfig from '../common/PathsConfig.vue';

const progress = ref(0)
const configDialogVisible = ref(false)
const textToSearch = ref('')
interface SearchResult {
  id: number,
  file: string,
  text: string,
  hasChildren?: boolean,
  paragraphs?: SearchResult[]
}
const searchResults = ref<SearchResult[]>([])
const openFile = (scope: { row: SearchResult }) => {
  openSearchResult(scope.row.file, scope.row.text, textToSearch.value)
}
const startIndexing = () => {
  const ws = createWebSocket(`ws://localhost:8888/api/text_search/run_text_index`, (data: {
    type: string, data: {
      analysed_docs: number,
      docs_num: number,
      doc_file: string,
    }
  }) => {
    // if()
    progress.value = Math.round((data.data.analysed_docs / data.data.docs_num) * 100)
    console.log(data)
  })
}

const search = () => {
  searchResults.value = []
  let i = 0
  const ws = createWebSocket(`ws://localhost:8888/api/text_search/run_text_search?text=${textToSearch.value}`, (data: {
    type: string, data: {
      file: { name: string },
      paragraphs: string[]
    }
  }) => {
    // if()
    // progress.value = Math.round((data.data.analysed_docs / data.data.docs_num) * 100)
    console.log(data)
    if (data.type == "update") {
      searchResults.value.push({
        id: ++i,
        file: data.data.file.name,
        text: data.data.paragraphs[0],
        hasChildren: true,
        paragraphs: data.data.paragraphs.map((paragraphText) => {
          return {
            id: i,
            file: data.data.file.name,
            text: paragraphText
          }
        })
      })
      console.log(searchResults.value)
    }
  })
}

onMounted(() => {

})
</script>
<style lang="css">
.el-table .el-scrollbar__view {
  width: 100%;
}

::v-deep(.el-table__row:not([class*='el-table__row--level-'])) {
  td:first-child {
    padding-left: 24px;
  }
}
</style>
